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ABSTRACT 



This article describes the evolution of computer interface 
research issues from text-based interface design guidelines to more complex 
issues, including media selection, interface design, and visual design. This 
research is then integrated into the Analysis-based Message Design (AMD) 
process. The AMD process divides the interface design process into four 
action steps: (1) identify conditions - -analyzing the environmental, learner, 

or instructional needs which define or create boundaries for the 
instructional product; (2) select design features- -using instructional and 
learning theories, media selections research, and personal experience to 
support design feature selection; (3) resolve conflicts- -giving special 
consideration to features which are desirable with regard to one or more 
conditions and undesirable with regard to another condition; and (4) create 
the design layout- -using the ABC's R US design principles (alignment, 
balance, contrast, chunking, repetition, utility, and simplicity) . 
Explanations and graphic examples of these principles are provided. (DLS ) 
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Abstract 

Since the 1960's computer interfaces have evolved from text-based to multimedia formats, resulting in an 
evolution in the research regarding interface design. This article describes the evolution of research issues from 
text-based interface design guidelines to more complex issues including media selection, interface design, and visual 
design. This research is then integrated into the Analysis-based Message Design (AMD) process. The AMD 
process divides the interface design process into four action steps, the fourth of which features the ABC's R' US 
design principles. 

Introduction 

Since the design of computer screens was first addressed in the 1960’s, the types of features used in 
instructional products have not just expanded, they have exploded with new possibilities such as graphical user 
interfaces, hypermedia, digital video, and virtual reality. Similarly, the area of interface design research has also 
evolved in order to adjust for these changes. 

The purpose of interface design research is to determine which factors help computer screen layouts support 
learning and which factors may detract from learning. The goal of this paper is to describe the genesis and 
development of existing interface design research and to describe a process called Analysis-based Message Design 
(AMD) which incorporates this research throughout its four-step process. 



Print-based Design Research 

Computer-assisted instruction (CAI) began in the 1960’s with text-based programs such as the Stanford 
CAI project, the IBM 1500 CAI system, and the PLATO project (Saettler 1990, p. 456). The first interface design 
guidelines for the growing number of text-based CAI programs were based upon research on print-based instruction, 
especially M. A. Tinker’s Legibility of Print (1963). While Tinker’s work was a compilation of legibility studies on 
various print topics (see Table 1), his findings were the basis of a series of prescriptive guidelines for computer text 
(Reynolds, 1979; Rambally & Rambally, 1987; Shires & Olszak, 1992). 



Table 1. Summary of Tinker's Legibility Findings and Corresponding Design Guidelines 



Topic 


Tinker’s Findings 


Design Guidelines 


Text Style 


• Italic type was found less legible than normal text. 

• Bold text used for emphasis did not decrease legibility. 

• Lower-case letters were more legible than all-caps. 


• Avoid italic type. 

• Use bold text for emphasis. 

• Avoid using all-caps. 


Text Font 


• Sans serif and serif fonts were found equally legible; 
however, readers preferred serif fonts. 


• Use serif fonts for large bodies of text. 


Text Size 


• Very small and very large type sizes decreased reading 
speed. 


• Use 18pt text for headings and 12pt text for 
body text. 


Line Spacing 


• Leading had an important effect on legibility. An average 
leading of 2-4 points proved the most legible for most font 
and line length combinations. 


• Double space text or skip a line between 
paragraphs. 


Line Length 


• Readers preferred moderate line lengths and ample 
margins. 


• Leave white space in the layout. 


Text Blocks 


• Square blocks of text were found less desirable than regular 
blocks of text. 


• Avoid justified text blocks. 


Color 

Combinations 


• The most legible color combinations were those with the 
greatest contrast between the text and the background, such 
as black text on a white background 


• Use dark text on a light background or light 
text on a dark background. 
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Current Interface Design Research 

The 1980’s brought a new face to computers, the graphical user interface (GUI). While the first computers 
with GUI interfaces were manufactured by Xerox, they did not have national attention until Apple announced its 
line of GUI computers in 1984 (Cambell-Kelley & Aspry, 1996). This new interface with its multimedia 
capabilities presented designers with a variety of text, audio, and visual design options. As a result, print-based 
guidelines were supplemented by interface design research which related to text, as well as multimedia. 

In the past, some designers have sought prescriptive design guidelines, lists of the “do”s and “don’t”s of interface 
design. However, as Megarry relates, such simplistic lists of guidelines cannot adequately address the design 
variables in complex multimedia products (1991). Therefore, current interface design research involves a rethinking 
of the concept of interface design guidelines. From the 1980’s until the present time, the focus has shifted to three 
main types of interface design research: media selection research, interface research, and visual design research. 

Media Selection Research 

Media selection research is based upon the assumption that certain media are more effective than others 
with regard to certain types of learners or content (Kozma, 1991). This research tests the effectiveness of different 
media under various learner, content, and delivery environment conditions. Instructional designers can use this 
research to guide their selection of the most effective media features to meet the conditions surrounding their 
instruction. 

Interface Research 

Interface research deals with the design and testing of human-computer interfaces (Apple, 1989; Cates, 
1994; Laurel, 1990; Nielsen, 1990; & Shneiderman, 1992). It revolves around the consistency between the content, 
the media, the functionality, and the metaphoric theme of a multimedia product. Instructional designers can use this 
research to help them develop a product which supports clear and consistent interaction between the user and the 
computer program. 

Visual Design Research 

Visual design research addresses the visual principles used in interface design. These heuristics are 
extensions of the ancient Greek aesthetic principles of symmetry, order, emphasis, unity, and balance. These 
principles have been extended to also include proximity, and parsimony (Heinich, Molenda, Russell, & Smaldino, 
1996; Williams, 1994; Reilly & Roach, 1986). Instructional designers can use these principles of aesthetic visual 
design decrease feelings of stress among learners and increase feelings of confidence and stability (Reilly & Roach, 
1986, p. 39; Rambally & Rambally, 1987, p. 151). 

Analysis-Based Message Design Process 

Computer screen message design addresses the three layers of a screen: the content layer containing the 
information to be learned in the form of various media features, the interface layer containing the means through 
which the learner interacts with the information presented (text, graphics, etc.) including the structure through which 
it is presented (navigation, metaphor, etc.), and the aesthetic layer which organizes the information and interface 
according to aesthetic principles. The AMD process reflects the way in which these three layers are designed. It 
addresses how the research is used in making design decisions. AMD is a process which separates the design phase 
of the Instructional Systems Design (ISD) model into a four-step process. During this process, the instructional 
design team will (1) identify conditions, (2) select appropriate design features, (3) resolve conflicts between design 
features, and (4) create a design layout for use in the development of the product (see Figure 1). 

Step 1: Identify Conditions 

The first step of AMD does not directly incorporate interface design research. Its purpose is to link the 
analysis and design phases together and to emphasize the importance of analysis as a foundation for design. . While 
it is outside the scope of this paper to discuss how to collect analysis and evaluation data, the author would like to 
stress the importance of this data. Therefore, in this step the instructional design team analyzes the conditions which 
surround the instructional context. These conditions are environmental, learner, or instructional needs which define 
or create boundaries for the instructional product. While collecting or compiling the conditions which result from 
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Figure 1. The integration of AMD into a cyclical design cycle 




analysis or formative evaluation data, it is crucial that instructional designers identify answers for the following four 
analysis questions: 

• What is the content like? 

(subject area, type of learning, scope of content, expected outcomes, instructional approach, etc.) 

* What are the learners like? 

(age, ability level, experience level, motivation, culture, learning styles, student groupings, etc.) 

• What will be the final delivery environment? 

(computer type, processor, speed, memory, disk space, operating system, network configuration, color, 
sound, and video capabilities, etc.) 

* What constraints are being put on the production process? 

(time, cost, resources, etc.) 

It should be noted that in a cyclical design process, evaluation results, not just analysis results, will also 
generate conditions which will create boundaries for the product. Sometimes these results will even de-emphasize 
the importance of some of the original pre-design analysis results. Therefore, it is important to include both pre- 
design analysis results and formative evaluation results since both of these types of data affect the conditions 
surrounding the instructional product. 

Step 2: Select Design Features 

The second step of AMD is to take the conditions which surround the instructional context and to select the 
design features which will best address those conditions. In the case of each condition, there are some features 
which should be avoided and others which should be included in the future design layout (Romiszowski, 1981, ch. 
17; Gagne, Briggs, & Wagner, 1992, ch. II). The research basis for these decisions should stem from media 
selection research studies and subsequent research summaries (Jonassen, 1996; Thompson, Simonson, & Hargrave, 
1996). 

The most important issue to remember during this step of the AMD process is that methods should not be 
chosen arbitrarily. On the contrary, instructional designers should use instructional and learning theories, media 
selection research, and personal experience to support design feature selection. All three of these areas are 
important sources of information. While some instructional designers may argue that professionals in the field 
disregard this step, the author would argue that is not the case. Professional designers have a high level of expertise 
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because they have internalized much of the research and procedures involved in the design process. However, when 
they reflect on their product design, it becomes evident that they have selected features which were tied to effective 
learning of the content while talcing into consideration the learner, environmental, and process conditions which 
surround the instructional context. 

Example: 

Let us imagine that there is an instructional designer who is working on an instructional product to teach 
Spanish conversational skills. In the first step of the AMD process, he discovered a number of conditions. For the 
sake of brevity, let us concentrate on three of those conditions, the content/skill of Spanish conversation, the low 
motivation level of the learners and the delivery computer configuration (networked 486 PCs with 8MB of RAM but 
lacking sound cards and CD-ROMs). During the second step of the AMD process, the designer will determine 
which design features will be most effective for these conditions (see Table 2). 



Table 2. Selection of design features based on three conditions of content , motivation , and delivery computer 
specifications 



Condition: 


Features to Include: 


Features to Avoid: 


Spanish conversation 


• Text 

• Graphics (to support text) 

• Digital audio 

• Digital video 




Low motivation level of the 
learners 


• High interaction 

• Multimedia features (graphics, audio, 
video, etc.) 

• Learner control 

• Real-world examples (graphics, video, 
etc.) 

• Simulations 


• Drill Structures 

• Fixed linear navigation structure 


Networked 486 PCs with 
4MB of RAM but lacking 
sound cards and CD-ROMs 




• Speed intensive programming 

• Digital audio 

• Digital video 



Step 3: Resolve Conflicts 

The third step of AMD resolves the conflicts which may exist between the features to be avoided and the 
features to be included for all the conditions surrounding the instruction. Conflicts occur when a feature is desirable 
(to be included) with regard to one or more conditions and undesirable (to be avoided) with regard to another 
condition. There are four ways to resolve these conflicts: 

• Avoid the feature. 

A conflicting feature which is not expected to significantly impact the effectiveness of the instruction can 
simply be avoided. 

• Include or avoid the feature according to the condition with the highest priority. 

When feature selection varies with respect to different conditions, however one condition has a high-impact 
upon the product or the production cycle (such as instructional objectives or cost issues), the feature can be 
avoided or included with regard to the highest priority condition. The focus here is on maximizing the 
effectiveness of the instructional product within the constraints which surround its development. 

• Include the feature, but address its effectiveness during formative evaluation. 

If it is uncertain whether a feature will improve instruction due to the conditions which surround it, the 
feature can be included in the design and while being flagged for formative evaluation. In this case, the 
risk of including the feature can be minimized by testing its effectiveness during the formative evaluation 
phase. 

• Renegotiate with the client. 

Although it is not common, there are times when a conflict should be resolved through renegotiation with 
the client. This is the case when including or avoiding a given feature would compromise the effectiveness 
of the instructional product. 
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Example: 

Features which are in possible conflict need special consideration. They are too important to simply be 
avoided since they meet certain conditions of the instructional environment. Sometimes the solution of these 
conflicts involves more than one of the four resolution strategies listed below. For example, the instructional 
designers who are designing the Spanish conversation product might decide to forego the aspects of multimedia 
since the delivery computers do not have the hardware requirements for such features. The addition of digital video 
would probably not have a major impact on the learner’s auditory practice so it could be avoided without 
compromising the instructional effectiveness of the product. By avoiding digital video, the program would take up 
less storage space. However, it is crucial to have digital audio in order to teach the oral and auditory skills needed to 
converse in Spanish. In this case, there needs to be a renegotiation with the client since delivery conditions are in 
direct conflict with instructional effectiveness and there is no other way to resolve this conflict. In the end, the client 
agrees to invest in sound cards for the machines but not CD-ROMs. With the sound cards and the available hard 
disk space on the machines it is now possible to have digital audio. In this case, conflicts were avoided by using a 
combination of avoidance and renegotiation. 

Step 4: Create the Design Layout 

The fourth step of AMD involves the creation of the actual design layout. This layout takes the design 
features which are deemed effective for the conditions that surround the instructional product and gives them a form 
for the screen. Layout creation relies upon interface research and visual design research. The results of both of 
these types of research can be summed up with seven ABC’s R’ US design principles: alignment, balance, contrast, 
chunking, repetition (theme), utility, and simplicity. 

• Alignment 

Alignment refers not only to the alignment of text, but also to the alignment of all visual objects. Objects 
have six points of alignment: right, center, left, top, middle, and bottom. The eye can perceive the strongest 
alignment when objects are aligned on the outer points on the right, left, top, and bottom. 

• Balance 

The center of a page or a screen is its fulcrum of balance. Balance is achieved when the weight of the 
objects on the left side are relatively equal to those on the right side and when the objects on the top half 
are relatively equal to those on the bottom half. On a light background, objects which are darker have 
more visual weight than those which are lighter. On a dark background the opposite is true. 

• Contrast 

Contrast is the level of difference in appearance between objects. Contrast can be achieved by placing a 
dark object by a light object or by putting a thin-featured object by a thick-featured object. If an object has 
a high level of contrast from its surrounding objects, it draws attention to itself. The key to effective 
contrast is to use it sparingly. If one object stands out on a page or on a screen, it will draw the learner’s 
attention. If a number of objects contrast on a page or on a screen, they can distract or even confuse the 
learner. 

• Chunking 

Visual chunking refers to the placement of objects. Objects which carry out similar functions, such as 
navigation buttons, should be chunked or placed in the same visual zone of a page or a screen. Likewise, 
text headings should be chunked with the text which supports them. 

• Repetition 

Repetition has many related layers. It refers to the consistent use of objects, effects, fonts, sizes, styles, and 
colors both on an individual page or screen and also throughout the product as a whole. Repetition also 
refers to the metaphor or theme used throughout the product. In this sense, all objects should repeat and 
support the same visual message. 

• Utility 

Utility refers to the usability of the visual interface. It should be clear to the learner which objects are 
interactive and where the learner is located within the instructional product. 

• Simplicity 

Simplicity addresses the appropriateness and the necessity of the visual objects on a page or on a screen. 
The purpose of visual objects is their instructional value not their impact value. Objects which do not 
support instruction can detract from learning. The key is to keep the visual design simple and only include 
those visual objects which are necessary to convey the instructional message. 
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Example: 

The ABC’s R’ US principles are the keys to building a usable and aesthetically sound design. Let us see 
how the instructional designers use these principles to build the layout design for the practice screens of the Spanish 
conversation product. 

Figure 2. The application of the principle of simplic ity to a Spanish conversation project 

Key Features 

• Conversation in Text Form 

• Graphic to Support Conversation Text 

• Conversation in Audio Form 

• Means of Recording Learner Practice 

• Separation of Content into Topic Modules 



When building layouts for the various types of screens in a given interface, the principles are used in 
reverse. Therefore the designers use simplicity from the beginning of the design process, since the key to effective 
design is focusing on instruction and ease of interaction (see Figure 2). They select the key media features for the 
interface from steps two and three which are most integral to their goal of effective instruction. In the case of the 
Spanish conversation project, the key features are conversation text, a graphic to support the conversation text, a 
digital audio recording of the conversation text, a means of recording learner practice conversations, and separation 
of the content into separate topic modules (for future sample screens, the topic is “charlando (small-talk)”). 



Figure 3. The application of the principle of utility t o a Spanish conversation project 



Charlando 



Jos6 : £De d6nde ©res? 
Carmen: Soy d© E sparta, iy tu? 

Jose: Soy de la Argentina. 
Carmen: i Qu6 fantastico! 



1 of 4 



Exit 



* 



* 4 



Listen 



Record 



Next the designers focus on utility. They decide that each screen needs to have the following elements: a 
title, the text of the conversation, a simple graphic image to focus the learner on the topic of the conversation, a 
means of accessing the digital audio clip of the conversation, a means of recording the learner’s practice 
conversation, a means of moving from one card to another, and a means of leaving the practice area of the program 
(see Figure 3). The designers decide to use a short tutorial on how to use the program at the beginning so that the 
learner knows how to interact with these elements and their is no need to repeat instructions for using the interface 
on each of the module screens. 
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As they apply the principle of repetition, the designers decide to use a Spanish theme to echo the objective 
of teaching Spanish. The background image on the screen uses colors which are present in the flags and crafts of 
many Spanish-speaking countries. The pattern is based upon the pattern used in goods woven in several Central 
American countries. The screen reference and the words on the listen, tape, and exit buttons are in Spanish, as well, 
to repeat the Spanish theme. These thematic elements are repeated on all the module screens to create a Spanish 
look and feel to accompany the Spanish content (see Figure 4). 




Next the chunking of the interface elements separates like elements into the same visual zone. The zigzag 
red patterns also serve to break the screen into three different visual zones so that the various types of elements can 
be chunked separately. The top zone is used for the title and the page number. The middle zone holds the content of 
the screen (the text and accompanying graphic). The bottom zone is contains the navigation and interaction buttons 
(see Figure 5). 



Figure 6. The application of the principle of contras t to a Spanish conversation project 




After the elements are chunked into the different visual zones, the text and graphics in the top and bottom 
zones is no longer legible (see Figure 5). Therefore, the designers increases the contrast by using black text and 
light background colors to maximize the contrast and the legibility of the text in the heading, and the bottom buttons. 
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The light color also goes with the repeated Spanish theme which was earlier "established. In addition, a heavier font 
is used for all text, including the conversation dialogue text, to increase legibility (see Figure 6). 




The interface appears balanced for the most part; however, the designers notice that the top zone needs 
some adjustment. They decrease the size of the module screen number so that it increases the left/right balance of 
the layout (see Figure 7). 

Figure 8. The application of the principle of alignm ent to a Spanish conversation project 




Finally, the designers align the outer edges of the text and the graphic with the outer edges of the arrow 
navigation buttons. All of the buttons are middle aligned, as are the text and graphic of the middle zone. The 
information top zone is bottom aligned to align it parallel to the red design (see Figure 8). 



Figure 9. The completed Spanish conversation proje ct 




After working through the seven principles of the ABC’s R’ US, the finished design (see Figure 9) is now 
ready to enter the development stage where it will be the basis of the grid layout for the module screens. 
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Conclusions 

The changes in computer technology has moved the realm of interface design research from print-based 
guidelines to generative interface design research on media selection, interface design, and visual design. These 
three research types are integrated into the AMD process. The true strength of the AMD process lies not so much in 
its four-step process, but in its integration of these four design steps with current types of interface design research. 
The process tools of conflict resolution and the ABC’s R’ US design principles provide designers with simple ways 
to tackle interface design decisions. Although one example of the AMD process is included in this paper, future 
research could verify if using the AMD process and the principles of ABC’s R’ US increases the effectiveness or 
efficiency of the visual design process. 
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